<!--
 * @Descripttion: 时间线
 * @version: 
 * @Author: wangys
 * @Date: 2022-12-28 17:12:00
-->
<template>
  <div class="timeline">
    <div class="timeline-container">
      <el-timeline>
        <el-timeline-item
          :timestamp="item.timestamp"
          placement="top"
          v-for="(item, index) in timelineList"
          :key="index"
        >
          <el-card>
            <h4 class="title">{{ item.title }}</h4>
            <p>啊丢 提交于 {{ item.time }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Timeline',
  components: {},
  props: {},
  data() {
    return {
      timelineList: [
        {
          timestamp: '2022/12/28',
          title: '完成了工具栏',
          time: '2022/12/28 17:19'
        },
        {
          timestamp: '2022/12/27',
          title: '完成了时间线',
          time: '2022/12/28 16:29'
        },
        {
          timestamp: '2022/12/26',
          title: '完成了日历',
          time: '2022/12/28 15:39'
        },
        {
          timestamp: '2021/11/13',
          title: '完成了首页',
          time: '2021/11/13 20:46'
        },
        {
          timestamp: '2021/11/11',
          title: '初始化模板',
          time: '2021/11/11 20:46'
        }
      ]
    }
  },
  methods: {}
}
</script>
<style scoped lang="less">
.timeline {
  width: 100%;
  height: 100%;
  .timeline-container {
    display: flex;
    flex-wrap: wrap;
    width: 1080px;
    margin: 50px auto 0;
    .el-timeline {
      width: 100%;
      .title {
        // color: rgba(30, 188, 240);
      }
      ::v-deep .el-timeline-item__node--normal {
        background-color: rgba(30, 188, 240, 0.3) !important;
      }
      ::v-deep .el-timeline-item__tail {
        border-left: 2px solid rgba(30, 188, 240, 0.3) !important;
      }
    }
  }
}
</style>
